<template>
	<div class="outer" :style="{width:`${width}%`}">
		<div class="title">
				<span class="need" v-if="struc?.must">*</span>
				<span>{{ struc?.viewName }}</span>
		</div>
		<div class="contextPackage">
			<el-select 
				class="select-1"
				v-model="selectValue.value" 
				:placeholder="struc?.hint" 
				@blur="out($event)"
				@change="out($event)"
				clearable
				:disabled="Boolean(!struc?.canUpdate)"
				filterable
				>
				<el-option
					v-for="item in options"
					:key="item.id"
					:label="item.name"
					:value="item.id">
				</el-option>
			</el-select>
			<span class="errorhint"  v-if="showError">{{ struc?.errorHit }}</span>
		</div>
	</div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, PropType, reactive, ref, watch } from "vue";
import useDataCheck, { DataStruc } from "../../hook/datastruc";
import useRequet, { RespData } from "../../hook/network"
type Options = {
	id: number,
	name: string
}
export default defineComponent({
	type: 202,
	name: "TSelect",
	props: {
		struc: Object as PropType<DataStruc>,
		passWidth: {
			type: Number
		}
	},
	setup: (props, context) => {
		let showError = ref(false);
		const request = useRequet({ path: props.struc?.dataSource });
		const options = ref( [] as Options[])
		let selectValue: DataStruc = reactive(props.struc as DataStruc)
		const dataCheck = useDataCheck();
		
		let check = () => {
			if(props.struc?.must) {
				if (selectValue.value) {
					showError.value = false;
				} else {
					console.debug("检查出错：",showError);
					props.struc.errorHit = `请选择${props.struc.viewName}`
					showError.value = true;
				}
			}
				return !showError.value;
			};
		const req = () => {
      request.sendRequest({
        address: '',
        params: {},
        success: (resp: RespData) => {
          if(resp.code !== 0) return resp.msg
					options.value = resp.data || []
        },
        fail: (resp: RespData) => {
          if(resp.code !== 0) return resp.msg
          
        },
        method: "GET",
      })
    }
    req()
		
		onMounted(() => {
			dataCheck.addDataCheck(check);
		});
		const width = computed(() => props.passWidth)

		return {showError,check, selectValue, width, options, request}
	},

	// renderTriggered(event) {
	// 	debugger;
	// },
	methods: {
			out(event: MouseEvent) {
				if(!this.selectValue.must) {
					this.showError = false;
				} else {
					this.check()
				}
		},
	},
});
</script>

<style scoped lang="scss">
@import '@style/extend';
.outer {
	display: flex;
  flex-direction: column;
	margin-bottom: 10px;
	width: 33.333%;
	padding-right: 10px;
	box-sizing: border-box;
	.title {
    padding-bottom: 10px;
		font-size: $fontSize-1;
		color: $regularText;
		.need {
			color: red;
		}
	}

	.contextPackage {
		position: relative;
		.errorhint {
			@extend .error;
			height: 10px;
			display: block;
			line-height: 1;
			position: absolute;
			top: 100%;
		}
	}
}

.el-select::before {
  content: '';
  display: block;
  width: 1px;
  height: 100%;
  background: #DCDFE6;
  position: absolute;
  z-index: 1;
  right: 30px;
}
</style>
